<template>
  <div id="app">
    <div class="search-title-wrapper">
      <search-title class="main-title" @ifocus="ifocus"></search-title>
    </div>
    <div>
      <keep-alive>
        <router-view/>
      </keep-alive>
    </div>
    <div class="tabs-wrapper" v-show="showTabs">
      <tabs></tabs>
    </div>
    <transition name="vertical-fade">
      <div class="search-view-wrapper" v-show="showSearchView">
        <search-view></search-view>
      </div>
    </transition>
  </div>
</template>

<script>
import Tabs from 'components/tabs/tabs'
import SearchTitle from 'components/search-title/search-title'
import SearchView from 'components/search-view/search-view'
import { mapGetters } from 'vuex'

export default {
  name: 'App',
  components: {
    Tabs,
    SearchTitle,
    SearchView
  },
  computed: {
    ...mapGetters({
      'showTabs': 'showTabs',
      'showSearchView': 'showSearchView'
    })
  },
  methods: {
    ifocus (e) {
      console.log('homepage get ifocus')
      this.$store.commit('SET_SEARCH_VIEW_STATE', true)
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
#app
  .tabs-wrapper
    position: fixed
    width: 100%
    bottom: 0
    left: 0
  .search-title-wrapper
    position: fixed
    left: 0
    top: 0
    width: 100%
    z-index: 10
  .search-view-wrapper
    position: fixed
    left: 0
    top: 0
    bottom: 0
    right: 0
    z-index: 200
    background: #FFFFFF
    &.vertical-fade-enter-active, &.vertical-fade-leave-active
      transition: transform .3s
    &.vertical-fade-enter, &.vertical-fade-leave-to
      transform: translate3d(100%, 0, 0)

</style>
